<!DOCTYPE html>
<html lang="zh-CN">
<head>
    //@ include("/inc/head.html"){}
    <title>角色信息</title>

    <script charset="UTF-8">
        function cancelAll() {
            $('select[name="resourceIds"]').val(null).trigger("change");
        }
        function checkAll() {
            var options = $('select[name="resourceIds"] option');
            var opts = [];
            for (var i = 0; i < options.length; i++) {
                var option = options[i];
                opts.push($(option).attr('value'));
            }
            $('select[name="resourceIds"]').val(opts).trigger("change");
        }
    </script>
</head>
<body>

//@ include("/shiro/top.html"){}

<div class="container">

    //@ if(isNotEmpty(errMsg)){
    <div class="alert alert-danger" role="alert">${errMsg!}</div>
    //@ }

    <ol class="breadcrumb">
        <li><a href="${ctxPath}/shiro/main">权限管理</a></li>
        <li><a href="${ctxPath}/shiro/role/list">角色管理</a></li>
        <li class="active">
            //@ if(action=='insert'){print('新增角色');}else{print('修改角色');}
        </li>
    </ol>

    <form class="form-horizontal" method="post" action="${ctxPath}/shiro/role/${action}">
        <div class="form-group" style="display: none;">
            <label class="col-sm-2 control-label">ID</label>
            <div class="col-sm-10">
                <input class="form-control" name="role.id" value="${role.id!}" placeholder="ID" readonly required/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">名称</label>
            <div class="col-sm-10">
                <input class="form-control" name="role.name" value="${role.name!}" placeholder="名称" required autofocus/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">拥有权限</label>
            <div class="col-sm-8">
                <select class="form-control" name="resourceIds" multiple required>
                    //@ for(r in resources){
                    <option value="${r.id}">
                        //@ var i=r.levels;while(i-->0){print('　');}
                        ${r.name}
                    </option>
                    //@ }
                </select>
                <script>$('select[name="resourceIds"]').select2({closeOnSelect: false});</script>
                //@ if(isNotEmpty(resourceIds)){
                <script>$('select[name="resourceIds"]').val(${resourceIds}).trigger("change");</script>
                //@ }
            </div>
            <div class="col-sm-2">
                <button class="btn btn-success" onclick="checkAll();" type="button">全选</button>
                <button class="btn btn-danger" onclick="cancelAll();" type="button">全取消</button>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">顺序</label>
            <div class="col-sm-10">
                <input class="form-control" name="role.seq" value="${role.seq!1}" placeholder="顺序" required
                       type="number" min="1"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">描述</label>
            <div class="col-sm-10">
                <textarea class="form-control" name="role.remark" placeholder="描述">${role.remark!}</textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>